<template>
    <div class="home-singer">
        <h1>热门歌手</h1>
        <div class="wrapper" ref="wrapper">
        <ul class="content" ref="content">
            <li @click="selectItem(item)" v-for="(item,index) in listData" :key="index">
                <div class="cover">
                    <van-image :src="item.singer_pic" radius="10" lazy-load/>
                </div>
                <span>{{ item.singer_name }}</span>
            </li>
        </ul>
      </div>
    </div>
</template>

<script>
import { betterScrollHorizontal } from '../../common/betterScroll.js';
export default{
    data(){
        return{
            listData:[]
        }
    },
    created(){
        this.getData();
    },
    methods:{
        getData(){
            this.$request('get','/singer/list').then((res) =>{
                console.log(res);
                this.listData = res.data.list
                betterScrollHorizontal(this,this.$refs.wrapper,this.$refs.content,this.listData.length,10)
            }
            )
        },
        selectItem(item){
               const id =  item.singer_mid; //获取歌单的id
               //1.编程式导航、字符串路径的方式
            //    this.$router.push(`/songlist/${id}`);

               //2、带有路径对象的方式
               this.$router.push({path:`/singer/desc/${id}`})

            //    this.$router.push({
            //     name: 'singer/desc',
            //     params:{
            //         id //等同于id: id 
            //     }
            //    })
                } 
    }
}
</script>

<style scoped>
.home-singer > ul{
    display: flex;
    flex-wrap: wrap;
}
.home-singer > ul > li {
    width: 10rem;
    margin-right: 0.5rem;
}
/*.home-singer>ul>li:nth-of-type(3n+2){
    margin-left: o.5rem;
    margin-right: 0.5rem;
}
.singer_pic{
    position: relative;
}
.singer_pic>span{
    position: absolute;
    right: 0;
    bottom: 0.4rem;
    background-color: brown;
} */
.singer_pic > span {
    position: absolute;
    right: 0.2rem;
    bottom: 0.4rem;
    background-color: #a6a0a0;
    color: white;
    font-size: 14px;
    border-radius: 1rem;
    width: 5rem;
    border-radius: 1rem;
    display: inline-block;
}
.singer_pic {
    position: relative;
}
.wrapper {
    width: 100%;
    overflow: hidden;
}
/* ul.content {
    width: calc(12 * 10rem);
}  */
 ul.content li {
    display: inline-block;
    width: 10rem;
    
}
ul.content li * {
    margin: 0.1rem;
 }
 ul.content li > span {
    font-size: 0.8rem;
    color: #625858;
 }  

</style>
